<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="./css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="./css/header.css" />
    <script src="./js/jquery.js"></script>
    <script src="./js/bootstrap.js"></script>
    <title>Document</title>
    <style>
       #mainer{
        min-height: calc(100vh - 170px);
      }
    </style>
  </head>
  <body>
    <div id="bg">
      <div id="header"></div>
      <div id="mainer">
        <div class="panel panel-primary">
          <div class="panel-heading">Panel heading without title</div>
          <div id="introduce" class="panel-body">Panel content</div>
        </div>

        
      </div>
      <div id="footer"></div>
    </div>
    <script>
      $(function () {
        $("#header").load("./header.html");
        $("#footer").load("./footer.html");
        $.ajax({
          type:'get',
          url:'/introduce',
          success:(res)=>{
            $('#introduce').html(res[0].content)
          },
          error:(xhr,status,error)=>{
            console.log('出错了',error)
          }
        })
      });
    </script>
  </body>
</html>
